<template>
  <div class="_wz_ElectronicWaybillEdit">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
      <Card dis-hover title="承运信息" style="margin: 0 0 10px 0;">
        <Row>
          <i-col span="24">
            <i-col span="8">
              <FormItem label="运输企业" prop="deptUuid">
                <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable @on-clear="deptUuidFun">
                  <Option v-for="item in subDeptList" :key="item.uuid" :value="item.uuid" @click.native="deptUuidFun(item)">{{ item.deptName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="调度人" prop="schedulingPeople">
                <i-input v-model="formData.schedulingPeople" placeholder="请填写调度人" clearable></i-input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="承运日期" prop="wzSchedulingDate">
                <DatePicker type="date" v-model="formData.wzSchedulingDate" placeholder="请选择承运日期"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="运输车辆" prop="vehicleUuid">
                <i-select v-model="formData.vehicleUuid" filterable placeholder="请选择车辆" clearable>
                  <Option v-for="item in vehicleList" :key="item.uuid" :value="item.uuid">{{item.carPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="从业人员" prop="driverUuid">
                <i-select v-model="formData.driverUuid" filterable placeholder="请选择从业人员" clearable @on-change="userInfo">
                  <Option v-for="item in driverList" :key="item.uuid" :value="item.uuid">{{item.name}}-{{item.typeName}}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="货运挂车" prop="trailerUuid">
                <i-select v-model="formData.trailerUuid" filterable placeholder="请选择挂车" clearable>
                  <Option v-for="item in trailerList" :key="item.uuid" :value="item.uuid">{{item.trailerPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="人员电话" prop="driverPhone">
                <i-input v-model="formData.driverPhone" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="人员类型" prop="driverTypeName">
                <i-input v-model="formData.driverTypeName" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="身份证号" prop="driverIdentifyNum">
                <i-input v-model="formData.driverIdentifyNum" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
          </i-col>
        </Row>

      </Card>
      <Card dis-hover title="客户信息" style="margin: 0 0 10px 0;">
        <Row>
          <i-col span="24">
            <i-col span="8">
              <FormItem label="委托方" prop="customerShipperUuid">
                <i-select v-model="formData.customerShipperUuid" filterable placeholder="请选择委托方" clearable @on-clear="customerShipperUuidFun">
                  <Option v-for="item in shipperList" :key="item.uuid" :value="item.uuid" @click.native="customerShipperUuidFun(item)">{{ item.companyName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="联系人" prop="customerShipperContact">
                <i-input v-model="formData.customerShipperContact" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="联系电话" prop="customerShipperPhone">
                <i-input v-model="formData.customerShipperPhone" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
          </i-col>
        </Row>
        <Row>
          <i-col span="24">
            <i-col span="8">
              <FormItem label="确认方" prop="customerReceivingUuid">
                <i-select v-model="formData.customerReceivingUuid" filterable placeholder="请选择确认方" clearable @on-clear="customerReceivingUuidFun">
                  <Option v-for="item in recipientList" :key="item.uuid" :value="item.uuid" @click.native="customerReceivingUuidFun(item)">{{ item.companyName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="联系人" prop="customerReceivingContact">
                <i-input v-model="formData.customerReceivingContact" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="联系电话" prop="customerReceivingPhone">
                <i-input v-model="formData.customerReceivingPhone" placeholder="--" clearable disabled></i-input>
              </FormItem>
            </i-col>
          </i-col>
        </Row>
      </Card>
      <Card dis-hover title="地点信息" style="margin: 0 0 10px 0;">
        <Row>
          <i-col span="8">
            <FormItem label="起运地点" prop="placeStartUuid">
              <i-select v-model="formData.placeStartUuid" filterable placeholder="请选择起运地点" clearable @on-clear="placeStartUuidFun">
                <Option v-for="item in pointOrigin" :key="item.uuid" :value="item.uuid" @click.native="placeStartUuidFun(item)">{{ item.placeName }}</Option>
              </i-select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="起运地址" prop="placeStartAddress">
              <i-input v-model="formData.placeStartAddress" placeholder="--" clearable disabled></i-input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="行政区域">
              <i-input v-model="formData.startAdministrative" placeholder="--" clearable disabled></i-input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="8">
            <FormItem label="目的地点" prop="placeEndUuid">
              <i-select v-model="formData.placeEndUuid" filterable placeholder="请选择目的地点" clearable @on-clear="placeEndUuidFun">
                <Option v-for="item in portDischarge" :key="item.uuid" :value="item.uuid" @click.native="placeEndUuidFun(item)">{{ item.placeName }}</Option>
              </i-select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="目的地址" prop="placeEndAddress">
              <i-input v-model="formData.placeEndAddress" placeholder="--" clearable disabled></i-input>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="行政区域">
              <i-input v-model="formData.endAdministrative" placeholder="--" clearable disabled></i-input>
            </FormItem>
          </i-col>
        </Row>
        <FormItem label="备注" prop="remark">
          <i-input v-model="formData.remark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
      </Card>
    </Form>
    <div class="demo-drawer-footer" style="z-index: 20;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>

    <Spin size="large" fix v-if="spinShow"></Spin>



  </div>
</template>

<script>
  export default {
    props:['selectData'],
    data() {
      return {
        driverList:[],//驾驶员
        vehicleList:[],//车
        trailerList: [],//挂
        spinShow:false,//本页加载
        ruleValidate: {//验证
          customerShipperUuid: [
            {required: true, message: '请选择委托方', trigger: 'blur'},
          ],
          customerShipperContact: [
            {required: true, message: '请完善委托方联系人信息', trigger: 'blur'},
          ],
          customerShipperPhone: [
            {required: true, message: '请完善委托方联系电话信息', trigger: 'blur'},
          ],
          customerReceivingUuid: [
            {required: true, message: '请选择确认方', trigger: 'blur'},
          ],
          customerReceivingContact: [
            {required: true, message: '请完善确认方联系人信息', trigger: 'blur'},
          ],
          customerReceivingPhone: [
            {required: true, message: '请完善确认方联系电话信息', trigger: 'blur'},
          ],
          placeStartUuid: [
            {required: true, message: '请选择起运地点', trigger: 'blur'},
          ],
          placeStartAddress: [
            {required: true, message: '请完善起运地点的起运地址信息', trigger: 'blur'},
          ],
          placeEndUuid: [
            {required: true, message: '请选择目的地点', trigger: 'blur'},
          ],
          placeEndAddress: [
            {required: true, message: '请完善目的地的起运地址信息', trigger: 'blur'},
          ],
          deptUuid: [
            {required: true, message: '请选择运输企业', trigger: 'blur'},
          ],
          schedulingPeople: [
            {required: true, message: '请填写调度人', trigger: 'blur'},
          ],
          wzSchedulingDate: [
            {type: "date", required: true, message: '请选择承运日期', trigger: 'blur'},
          ],
        },
        formData: {
          wzSchedulingDate:new Date(),
          schedulingPeople:JSON.parse(sessionStorage.getItem('loginData')).user.name,
          customerShipperName: '',
          customerShipperContact: '',
          customerShipperPhone: '',

          receivingName: '',
          customerReceivingContact: '',
          customerReceivingPhone: '',

          placeStartPlace: '',
          placeStartAddress: '',

          placeEndPlace: '',
          placeEndAddress: '',

          deptName: '',

          shipmentName: '',
          shipmentPhone: '',
          shipmentCertificateNumber: '',


          driverUuid : '', //驾驶员
          vehicleUuid : '',//车辆
          trailerUuid : '',//挂车数据

          deptUuid:'',
          customerShipperUuid:'',
          customerReceivingUuid:'',
          placeStartUuid:'',
          placeEndUuid:'',
        },
        shipperList: [],//委托方
        recipientList: [],//确认方
        pointOrigin: [],//起运地
        portDischarge: [],//目的地
        subDeptList: [],//运输企业
      }
    },
    mounted() {
      var that = this;

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
          if(!that.selectData.id){
            that.formData.deptUuid = that.subDeptList[0].uuid
            that.deptUuidFun(that.subDeptList[0])
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })

      if(!!that.selectData.id){
        that.formData = that.selectData;
        that.$set(that.formData, 'wzSchedulingDate', (!!that.formData.schedulingDate) ? new Date(that.formData.schedulingDate) : '')//赋值
        that.$set(that.formData, 'startAdministrative', that.formData.placeStartProvinceName+' '+that.formData.placeStartCityName+' '+that.formData.placeStartCountyName)//赋值
        that.$set(that.formData, 'endAdministrative', that.formData.placeEndProvinceName+' '+that.formData.placeEndCityName+' '+that.formData.placeEndCountyName)//赋值
      }

      that.cascadeLoad();

    },
    methods: {
      removeData(){
        var that = this;
        // 委托方
        that.$set(that.formData, 'customerShipperName', '')//赋值
        that.$set(that.formData, 'customerShipperContact', '')//赋值
        that.$set(that.formData, 'customerShipperPhone', '')//赋值
        that.$set(that.formData, 'customerShipperUuid', '')//赋值

        // 确认方
        that.$set(that.formData, 'customerReceivingName', '')//赋值
        that.$set(that.formData, 'customerReceivingContact', '')//赋值
        that.$set(that.formData, 'customerReceivingPhone', '')//赋值
        that.$set(that.formData, 'customerReceivingUuid', '')//赋值

        // 起运地
        that.$set(that.formData, 'placeStartPlace', '')//赋值
        that.$set(that.formData, 'placeStartAddress', '')//赋值
        that.$set(that.formData, 'startAdministrative', '')//赋值
        that.$set(that.formData, 'placeStartUuid', '')//赋值


        // 目的地
        that.$set(that.formData, 'placeEndPlace', '')//赋值
        that.$set(that.formData, 'placeEndAddress', '')//赋值
        that.$set(that.formData, 'endAdministrative', '')//赋值
        that.$set(that.formData, 'placeEndUuid', '')//赋值


        //驾驶员
        that.$set(that.formData, 'driverUuid', '')//赋值


        //车辆
        that.$set(that.formData, 'vehicleUuid', '')//赋值


        //挂车数据
        that.$set(that.formData, 'trailerUuid', '')//赋值
      },
      cascadeLoad(){//级联加载 委托方、确认方、起运地点目的地
        var that = this;
        if(!that.formData.deptUuid){
          return ;
        }

        // 委托方
        that.shipperList = [];

        that.axios.post(that.apiUrl.billBasicBillBasicCustomerList, {deptUuid:that.formData.deptUuid,type: 1}).then(res => {
          if (res) {
            that.shipperList = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })


        // 确认方
        that.recipientList = [];
        that.axios.post(that.apiUrl.billBasicBillBasicCustomerList, {deptUuid:that.formData.deptUuid,type: 2}).then(res => {
          if (res) {
            that.recipientList = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })


        // 起运地
        that.pointOrigin = [];
        that.axios.post(that.apiUrl.billBasicBillBasicPlaceList, {deptUuid:that.formData.deptUuid,type: 1}).then(res => {
          if (res) {
            that.pointOrigin = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })

        // 目的地
        that.portDischarge = [];
        that.axios.post(that.apiUrl.billBasicBillBasicPlaceList, {deptUuid:that.formData.deptUuid,type: 2}).then(res => {
          if (res) {
            that.portDischarge = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })



        //驾驶员
        that.axios.post(that.apiUrl.billRecordBillDriverDispatchList, {deptUuid:that.formData.deptUuid,uuid:that.formData.uuid}).then(res => {
          if (res) {
            that.driverList = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })

        //车辆
        that.axios.post(that.apiUrl.billRecordBillVehicleDispatchList,{deptUuid:that.formData.deptUuid,uuid:that.formData.uuid}).then(res => {
          if (res) {
            that.vehicleList = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })


        //挂车数据
        that.axios.post(that.apiUrl.billRecordBillTrailerDispatchList,{deptUuid:that.formData.deptUuid,uuid:that.formData.uuid}).then(res => {
          if (!!res) {
            that.trailerList = res.data.data;
          }
        }).catch(err => {
          console.log("失败", err)
        })


      },
      //委托方
      customerShipperUuidFun(item) {
        let that = this;
        if (item) {
          that.$set(that.formData, 'customerShipperName', item.companyName)//赋值
          that.$set(that.formData, 'customerShipperContact', item.companyContacts)//赋值
          that.$set(that.formData, 'customerShipperPhone', item.companyContactPhone)//赋值
        } else {
          that.$set(that.formData, 'customerShipperName', '')//赋值
          that.$set(that.formData, 'customerShipperContact', '')//赋值
          that.$set(that.formData, 'customerShipperPhone', '')//赋值
        }
      },
      //收获方
      customerReceivingUuidFun(item) {
        let that = this;
        if (item) {
          that.$set(that.formData, 'customerReceivingName', item.companyName)//赋值
          that.$set(that.formData, 'customerReceivingContact', item.companyContacts)//赋值
          that.$set(that.formData, 'customerReceivingPhone', item.companyContactPhone)//赋值
        } else {
          that.$set(that.formData, 'customerReceivingName', '')//赋值
          that.$set(that.formData, 'customerReceivingContact', '')//赋值
          that.$set(that.formData, 'customerReceivingPhone', '')//赋值
        }
      },
      //起运点
      placeStartUuidFun(item) {
        let that = this;
        if (item) {
          that.$set(that.formData, 'placeStartPlace', item.placeName)//赋值
          that.$set(that.formData, 'placeStartAddress', item.placeAddress)//赋值
          that.$set(that.formData, 'startAdministrative', item.placeProvinceName+','+item.placeCityName+','+item.placeCountyName)//赋值
        } else {
          that.$set(that.formData, 'placeStartPlace', '')//赋值
          that.$set(that.formData, 'placeStartAddress', '')//赋值
          that.$set(that.formData, 'startAdministrative', '')//赋值
        }
      },
      //目的地
      placeEndUuidFun(item) {
        let that = this;
        if (item) {
          that.$set(that.formData, 'placeEndPlace', item.placeName)//赋值
          that.$set(that.formData, 'placeEndAddress', item.placeAddress)//赋值
          that.$set(that.formData, 'endAdministrative', item.placeProvinceName+','+item.placeCityName+','+item.placeCountyName)//赋值
        } else {
          that.$set(that.formData, 'placeEndPlace', '')//赋值
          that.$set(that.formData, 'placeEndAddress', '')//赋值
          that.$set(that.formData, 'endAdministrative', '')//赋值
        }
      },
      //承运方
      deptUuidFun(item) {
        var that = this;
        if (item) {
          that.$set(that.formData, 'deptName', item.deptName)//赋值
        } else {
          that.$set(that.formData, 'deptName', '')//赋值
        }
        /*
        * 1.清空 委托方、确认方、起运地点、目的地
        * 2.清空 list
        * */
        that.removeData();
        that.cascadeLoad();
      },

      //提交
      addSubmit(name) {
        var that = this;
        that.$refs[name].validate((valid) => {
          if (valid) {//正则判断使用
            that.formData.schedulingDate = (!!that.formData.wzSchedulingDate) ? that.public.timeFormatting(that.formData.wzSchedulingDate, "yyyy-MM-dd") : '';
            that.spinShow = true;//显示加载
            that.axios.post(that.apiUrl.billRecordBillRecordSaveOrUpdate, that.formData).then(res => {
              that.spinShow = false;
              if (res) {
                that.$Message.success("保存成功");
                that.$emit("closeFun", true);
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },

      //用戶信息
      userInfo(){
        let that = this;
        // 级联 需要清空用户数据
        if(!!that.formData.driverUuid && that.driverList.length > 0){
          let userInfo = that.driverList.filter(item => that.formData.driverUuid == item.uuid)[0];
          that.$set(that.formData, 'driverPhone', userInfo.phone)//赋值 //从业人员联系电话
          that.$set(that.formData, 'driverTypeName', userInfo.typeName)//赋值 //从业人员类型名称
          that.$set(that.formData, 'driverIdentifyNum', userInfo.identifyNum)//赋值 //从业人员身份证号
        }else{
          that.$set(that.formData, 'driverPhone', '')//赋值 //从业人员联系电话
          that.$set(that.formData, 'driverTypeName', '')//赋值 //从业人员类型名称
          that.$set(that.formData, 'driverIdentifyNum', '')//赋值 //从业人员身份证号
        }
      },
    }
  }
</script>
<style>

</style>
